<template>
	<view class="member">
		<u-collapse>
			<u-collapse-item :title="item.head" :desc='item.desc' :img='item.img' v-for="(item, index) in itemList" :key="index">
				<view class="m_b" v-for="(i,j) in item.body">
					<view class="">
						<view class="m_img">
							<image :src="i.img" mode=""></image>
						</view>
						<view class="">
							{{i.name}}
						</view>
					</view>
					
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script>
	export default {
		components:{},
		data() {
			return {
				accordionVal: '1',
				itemList: [{
					head: "普通会员",
					desc:'注册会员即可成为普通会员',
					open: true,
					disabled: true,
					img:'http://kf.sxqhkj.com/xiaomahuanteng/25.png'
				},{
					head: "白金会员",
					desc:'累计消费达3000元',
					body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
					open: false,
					body: [
						{
							name:'生日照',
							img:'../../static/user/30.png'
						}
					],
					img:'http://kf.sxqhkj.com/xiaomahuanteng/26.png'
				},{
					head: "黑金会员",
					desc:'累计消费达10000元',
					body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					open: false,
					body: [
						{
							name:'生日照',
							img:'../../static/user/30.png'
						},
						{
							name:'证件照',
							img:'../../static/user/31.png'
						},
						{
							name:'免费升级主题',
							img:'../../static/user/32.png'
						}
					],
					img:'http://kf.sxqhkj.com/xiaomahuanteng/27.png'
				},{
					head: "钻石会员",
					desc:'累计消费达20000元',
					body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					open: false,
					body: [
						{
							name:'生日照',
							img:'../../static/user/30.png'
						},
						{
							name:'证件照',
							img:'../../static/user/31.png'
						},
						{
							name:'免费升级主题',
							img:'../../static/user/32.png'
						},
						{
							name:'加急修片',
							img:'../../static/user/33.png'
						},
						{
							name:'插队特权',
							img:'../../static/user/34.png'
						},
						{
							name:'总监拍摄',
							img:'../../static/user/35.png'
						},
						{
							name:'专属特权服务',
							img:'../../static/user/36.png'
						}
					],
					img:'http://kf.sxqhkj.com/xiaomahuanteng/28.png'
				},{
					head: "至尊会员",
					desc:'累计消费达50000元',
					body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					open: false,
					body: [
						{
							name:'生日照',
							img:'../../static/user/30.png'
						},
						{
							name:'证件照',
							img:'../../static/user/31.png'
						},
						{
							name:'免费升级主题',
							img:'../../static/user/32.png'
						},
						{
							name:'加急修片',
							img:'../../static/user/33.png'
						},
						{
							name:'插队特权',
							img:'../../static/user/34.png'
						},
						{
							name:'样片团队拍摄',
							img:'../../static/user/38.png'
						},
						{
							name:'专属特权服务',
							img:'../../static/user/36.png'
						},
						{
							name:'至尊卡',
							img:'../../static/user/37.png'
						}
					],
					img:'http://kf.sxqhkj.com/xiaomahuanteng/29.png'
				}],
			}
		},
		methods: {
			change(e) {
				console.log(e);
			}
		}

	}
</script>

<style scoped>
	.member{
		padding: 30rpx;
	}
	.u-collapse-item{
		background-color: #FFFFFF;
		border-radius: 20rpx !important;
		margin-bottom: 20rpx !important;
	}
	/deep/.u-collapse-head{
		height: 193rpx !important;
		background: #FFFFFF  !important;
		border-radius: 20rpx !important;
		margin-bottom: 20rpx !important;
		padding: 0 20rpx;
	}
	.m_img {
		width: 72rpx;
		height: 72rpx;
		margin: 0 auto;
		
	}
	.m_img image{
		width: 100%;
		height: 100%;
	}
	.flex{
		display:flex;
	}
	.m_b{
		width: 25%;
		text-align: center;
		margin-bottom: 20rpx;
	}
	
	.desc{
		width: 686rpx;
		/* height: 306rpx; */
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 38rpx 20rpx;
		margin: 0 auto;
	}
	
	.d_title{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #010101;
		line-height: 60rpx;
	}
	
	.d_content{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
		text-indent: 60rpx;
		opacity: 0.65;
	}
</style>
